<template>
  <div class="collected">
    <van-nav-bar
      class="app-nav-bar"
      title="我的收藏"
      left-arrow
      @click-left="$router.back()" />
    <van-list>
      <van-cell class="article-item"
        v-for="(article, index) in list"
        :key="index"
        :to="{
          name: 'article',
          params: {
            articleId: article._id
          }
        }" >
        <div slot="title" class="title van-multi-ellipsis--l3">{{ article.title }}</div>
        <div slot="label">
          <div class="label-wrap">
            <span>{{ article.createDate | formattingTime }}</span>
            <span>{{ article.content }}</span>
          </div>
        </div>
        <van-image
          v-if="article.uploader"
          class="right-cover"
          fit="cover"
          :src="article.uploader"
        />
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  props: {},
  data () {
    return {
      list: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    'user.collectList' () {
      this.onloadApi()
    }
  },
  created () {},
  mounted () {
    this.onloadApi()
  },
  methods: {
    onloadApi () {
      const list = []
      this.user.collectList.forEach(item => {
        this.forCollection(item).then(res => {
          list.push(res.data)
          this.list = list.filter((value, index, self) => {
            return self.indexOf(value) === index
          })
        })
      })
    },
    forCollection (collected) {
      return new Promise(resolve => {
        this.$http(`api/tableTest/${collected}`).then(({ data: res }) => {
          if (res.code === 0) {
            resolve(res)
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.collected {
  .title {
    font-size: 16px;
    color: #3a3a3a;
  }
  /deep/ .van-cell__value {
    flex: unset;
    width: 116px;
    height: 73px;
    margin-left: 12px;
  }
  .right-cover {
    width: 116px;
    height: 73px;
  }

  .label-wrap {
    font-size: 11px;
    color: #b4b4b4;
    height: 50px;
    overflow: hidden;
  }
  .label-wrap span {
    margin-right: 12px;
  }
}
</style>
